<template>
  <div class="custom-table-list-wrapper">
    <div class="search" :class="{ active: toggleSearchStatus }">
      <div class="search-left" ref="searchFromRef">
        <el-form class="search-form" inline>
          <el-form-item label="关键词">
            <el-input
              class="search-input"
              v-model="searchParams.name"
              placeholder="请输入菜单名称"
              :suffix-icon="Search"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <a
          class="search-left-toggle"
          v-if="showToggle"
          @click="handleToggleSearch"
        >
          <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
          {{ toggleSearchStatus ? '收起' : '展开' }}
        </a>
      </div>
      <div class="search-right">
        <el-button type="primary" @click="initTableList()"
          ><svg-icon name="search" size="14px" />搜索</el-button
        >
        <el-button @click="handleReset()"
          ><svg-icon name="reset" size="17px" />重置</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="content-operate">
        <el-button type="primary" @click="handleAdd('新增菜单')"
          ><svg-icon name="add" size="15px" />新增菜单</el-button
        >
      </div>
      <div class="content-table">
        <el-table
          class="custom-table"
          :data="tableData"
          row-key="pkid"
          :default-expand-all="false"
          v-loading="loading"
        >
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="catalogName" label="菜单名称" width="200" />
          <el-table-column prop="menuType" label="类型" width="60">
            <template #default="scope">
              <span>{{ getDictValue('menuType', scope.row.menuType) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="菜单编码" />
          <el-table-column prop="routePath" label="路由地址" />
          <el-table-column prop="orderIndex" label="顺序" width="60" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getDictStyle('status', scope.row.status)">{{
                getDictValue('status', scope.row.status)
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column label="操作" width="160px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleAdd('新增菜单', { parentId: scope.row.pkid })"
                >新增</el-button
              >
              <el-button
                link
                type="primary"
                @click="handleEdit(scope.row, '编辑菜单')"
                >编辑</el-button
              >
              <el-button link type="danger" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <AddDialog ref="addRef" :detail="currentDetail" @close="handleClose" />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useTableList } from '@/hooks/useTableList'
import AddDialog from './add.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMenuList, menuDelete } from '@/api/manager/systemManage/menu.js'
import { useDict } from '@/hooks/useDict'
const { dict, getDictValue, getDictStyle } = useDict([
  'status',
  'menuType',
  'yn',
])
const searchParams = ref({})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  searchFromRef,
} = useTableList(searchParams, getMenuList, menuDelete)

const handleChangeStatus = (val) => {
  ElMessage.success('状态修改成功')
}

const loading = ref(false)
const initTableList = async () => {
  const params = { ...searchParams.value }
  try {
    loading.value = true
    const res = await getMenuList(params)
    if (res.success) {
      tableData.value = res.data[0].children
    } else {
      ElMessage.error(res.message)
    }
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

const handleClose = (isload = false) => {
  currentDetail.value = {}
  if (isload) {
    initTableList(1)
  }
}

const handleReset = () => {
  Object.keys(searchParams.value).forEach((key) => {
    searchParams.value[key] = ''
  })
  initTableList()
}

const handleDelete = (row) => {
  ElMessageBox.confirm('是否确定删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const params = { pkid: row.pkid }
      const res = await menuDelete(params)
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        initTableList(1)
      } else {
        ElMessage.error(res.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

onMounted(() => {
  initTableList()
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';
</style>
